<!--
 * @Description: sku面板
 * @Author: Kerwin
 * @Date: 2024-07-29 15:20:28
 * @LastEditTime: 2024-08-16 10:01:25
 * @LastEditors:  Please set LastEditors
-->
<template>
    <view class="sku-selector" v-show="show">
        <view class="c_container" >
            <view class="c_top_bar">
                <view class="c_title">选择规格 </view>
                <view class="c_close" @click="hideSkus">
                    <u-icon name="close" size="30" color="#333"></u-icon>
                </view>
            </view>
            <view class="c_sku_list">
                <view :class="['c_sku_item', { active: sku.active }]" @click="selectSku(sku)" v-for="(sku, index) in skus"
                    :key="index">
                    <!-- <view class="c_sku_img">
                        <image :src="getImgFullPath(sku.skuImageUrl)" mode="aspectFill"></image>
                    </view> -->
                    <view class="c_sku_name">{{ sku.name }}</view>
                    <view class="c_sku_price">￥{{ isMember? sku.memberMoney ? sku.memberMoney : sku.money : sku.money }}</view>
                    <!-- <view class="c_sku_select" @click="selectSku(sku)">
                        <view class="c_sku_select_icon"></view>
                    </view> -->
                </view>
            </view>
            <view class="steper" v-if="sku?.name">
                <view @click="minus($event, '.numberSteperMinus', sku?.id)" v-show="sku?.cart_count" class="num-btn">
                    －
                </view>
                <view class="num" v-if="sku?.cart_count"> {{ sku?.cart_count }}</view>
                <view @click="plus($event, '.numberSteperPlus', sku?.id)" :class="['numberBox']" class="num-btn">
                    ＋
                </view>
            </view>
        </view>
        <view class="mask" :class="{ show: show }" @click="show = false"></view>
    </view>
</template>

<script setup lang="ts">
import { computed, getCurrentInstance, ref, watch, nextTick, } from "vue";
import { getImgFullPath } from '@/utils/index'
import { getRect } from "./ballUtill";
import { orderApi, productApi } from "@/api";
import { storeToRefs } from 'pinia';
import { useUserStore } from '@/store';
import { emit } from "process";

const userStore = useUserStore()
const { accessToken } = storeToRefs(userStore)

const props = defineProps({
    list: {
        type: Array as () => Array<{ productId: number, shopProductSkus: Array<any>, cart_count: number }>,
        default: () => []
    },
    isMember: {
        type: Boolean,
        default: false
    }
});
const show = ref(false)
const skus = ref([])
const product = ref({})
const sku = ref({})
/*
 * 初始化sku数据
    * @param {Object} product 商品信息
    * 
 */
const initData = (productId: number) => {
    const productItem = props.list.find(item => item.productId === productId)
    if (!product) return
    product.value = productItem
    const { shopProductSkus } = productItem
    skus.value = shopProductSkus
    selectSku(skus.value[0])
}
/*
 * 选择sku
 * @param {Object} sku sku信息
 */
const selectSku = (e: any) => {
    // 选择sku
    skus.value.forEach(item => {
        item.active = false
    })
    e.active = true
    nextTick(() => {
        sku.value = e
    })
}
const emits = defineEmits(['change'])

const minus = (event: any, ref: any, skuId: number) => {
    emits('change', event, ref, {
        name: 'minus',
        product: product.value,
        skuId
    })
}
const plus = (event: any, ref: any, skuId: number) => {
    emits('change', event, ref, {
        name: 'plus',
        product: product.value,
        skuId
    })
}


/*
 * 显示sku面板
 * @param {Object} product 商品信息
 */
const showSkus = (productId: number) => {
    initData(productId)
    show.value = true
}

/*
 * 隐藏sku面板
 */
const hideSkus = () => {
    show.value = false
}




defineExpose({
    showSkus
})
</script>
<style lang="scss" scoped>
@import '@/styles/helper.scss';
.sku-selector {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
}
.c_container {
    left: 5%;
    top: 15%;
    width: 90%;
    z-index: 100;
    background: #fff;
    border-radius: 10rpx;
    box-shadow: 0 0 40rpx 6rpx rgba(0, 0, 0, 0.1);
    padding: 20rpx;

    .c_top_bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20rpx;
    }

    .c_title {
        font-size: 28rpx;
        font-weight: 600;
    }

    .c_sku_list {
        max-height: 800rpx;
        overflow-y: scroll;
        display: flex;
        flex-wrap: wrap;

        .c_sku_item {
            padding: 4rpx 8rpx;
            border: 1px solid #eee;
            border-radius: 10rpx;
            display: flex;
            margin-bottom: 20rpx;
            margin-right: 20rpx;

            &.active {
                border-color: #ff6700;
            }

            .c_sku_price {
                margin-left: 10rpx;
            }
        }
    }

    .steper {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: 70rpx;
        margin-right: 20rpx;

        .num-btn {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 34rpx;
            border-radius: 50%;
            width: 60rpx !important;
            height: 60rpx !important;
            line-height: 60rpx;
            font-weight: 600;
            background: rgb(242, 243, 245);
            color: rgb(50, 50, 51);
        }

        .num {
            padding: 0 10rpx;
        }
    }
}

.mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 99;
    display: none;

    &.show {
        display: block;
    }
}
</style>